<template>
  <view class="template-index tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha :isBack="false" :bottomShadow="false">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <view class="custom-nav__back" @click="tn('/circlePages/ranking')">
        </view>
      </view>
    </tn-nav-bar>

    <swiper class="card-swiper" @click="tn('/circlePages/ranking')" :circular="true" :autoplay="true" duration="500"
      interval="8000" @change="cardSwiper">
      <swiper-item v-for="(item, index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type == 'image'"></image>
        </view>
        <view class="swiper-item-text">
          <view class="tn-text-bold tn-color-white" style="font-size: 90rpx;">{{ item.title }}</view>
          <view class="tn-color-white tn-padding-top" style="font-size: 30rpx;">{{ item.name }}</view>
          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{ item.text }}
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
      <block v-for="(item, index) in swiperList" :key="index">
        <view class="spot" :class="cardCur == index ? 'active' : ''"></view>
      </block>
    </view>
    <view style="margin-top: 10px;" class="tn-flex">
      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="tn('/activityPages/planet')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
            <view class="tn-icon-discover-planet-fill tn-cool-color-icon4 tn-cool-bg-color-5"></view>
          </view>
          <view class="tn-color-gray--dark tn-text-center">
            <text class="tn-text-ellipsis">Knowledge Planet</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-radius" @click="tn('/activityPages/map')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon4__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
            <view class="tn-icon-map-fill tn-cool-color-icon4 tn-cool-bg-color-8"></view>
          </view>
          <view class="tn-color-gray--dark tn-text-center">
            <text class="tn-text-ellipsis">Map check-in</text>
          </view>
        </view>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/circlePages/business')">
      <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
        Looking for hiking partners
      </view>
      <!-- <view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
        <text class="tn-padding-xs"></text>
        <text class="tn-icon-topics"></text>
      </view> -->
    </view>

    <swiper class="card-swiper2 tn-margin-top-sm" :circular="true" :autoplay="false" duration="500" interval="5000"
      @change="resume">
      <swiper-item v-for="(item, index) in resumeList" :key="index" :class="cardCur2 == index ? 'cur' : ''"
        @click="tn('/circlePages/king')">
        <!-- <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view> -->
        <view class="swiper-item1 image-banner tn-shadow-blur"
          :style="'background-image:url(' + item.url + ');width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'">
        </view>
        <view class="swiper-item2 image-banner tn-shadow-blur"
          :style="'background-image:url(' + item.avatar + ');width: 120rpx;height: 120rpx;background-size: cover;'">
        </view>
        <view class="swiper-item-text tn-text-shadow-indigo">
          <view class="tn-text-bold tn-color-white" style="font-size: 45rpx;">{{ item.title }}</view>
          <view class="tn-color-white tn-padding-top-sm">{{ item.name }}</view>
          <view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
            <view class="tn-flex-1 tn-padding-sm tn-margin-right">
              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
                <view class="">
                  <view class="tn-text-xxl tn-color-white">{{ item.hot }}</view>
                </view>
                <view class="tn-margin-top-xs tn-color-white tn-text-df tn-text-center">
                  <text class="tn-icon-fire"></text>
                  <text class="tn-padding-left-xs ">hot</text>
                </view>
              </view>
            </view>
            <view class="tn-flex-1 tn-padding-sm tn-margin-left">
              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
                <view class="">
                  <view class="tn-text-xxl tn-color-white">{{ item.love }}</view>
                </view>
                <view class="tn-margin-top-xs tn-color-white tn-text-df tn-text-center">
                  <text class="tn-icon-like"></text>
                  <text class="tn-padding-left-xs">love</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>


    <view class="">
      <view class="tn-flex tn-flex-row-between" @click="tn('/activityPages/project')">
        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
          Popular hiking routes
        </view>
        <!-- <view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
          <text class="tn-padding-xs">全部</text>
          <text class="tn-icon-topics"></text>
        </view> -->
      </view>

      <view class="tn-flex tn-margin-left tn-margin-right tn-margin-top-sm">
        <view class="tn-flex-2">
          <view @click="tn('/circlePages/news?type=1')" class="image-pic tn-margin-right tn-shadow-blur"
            style="background-image:url('/static/DIV1.png')">
            <view class="image-tuniao1">
            </view>
          </view>
        </view>
        <view class="tn-flex-1">
          <view @click="tn('/circlePages/news?type=2')" class="image-pic tn-shadow-blur"
            style="background-image:url('/static/DIV2.png')">
            <view class="image-tuniao2">
            </view>
          </view>
          <view @click="tn('/circlePages/news?type=3')" class="image-pic tn-margin-top tn-shadow-blur"
            style="background-image:url('/static/DIV3.png')">
            <view class="image-tuniao2">
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      cardCur: 0,
      isAndroid: true,
      swiperList: [{
        id: 0,
        type: 'image',
        title: 'Explore the peak',
        name: 'Share your mountaineering stories ',
        url: '/static/home-banner.png',
      }, {
        id: 1,
        type: 'image',
        title: 'meet peers',
        name: 'Share your experiences.',
        text: '',
        url: '/static/home-banner.png',
      },],
      cardCur2: 0,
      resumeList: [{
        id: 0,
        type: 'image',
        title: 'Mary',
        name: 'designer',
        hot: '10.1K',
        share: '216',
        love: '962',
        avatar: '/static/avatar.png',
        url: '/static/pic1.png',
      }, {
        id: 1,
        type: 'image',
        title: 'Richail',
        name: 'teacher',
        hot: '132',
        share: '94',
        love: '186',
        avatar: '/static/avatar1.png',
        url: '/static/pic2.png',
      },],

      tuniaoData: [
        {
          title: 'UI设计',
          icon: 'image-text-fill',
          color: '#F33F5A',
          value: '前往咨询'
        },
        {
          title: '小程序',
          icon: 'data-fill',
          color: '#FFC32E',
          value: '前往咨询'
        },
        {
          title: '前端开发',
          icon: 'statistics-fill',
          color: '#954FF6',
          value: '前往咨询'
        },
        {
          title: '其他业务',
          icon: 'bankcard-fill',
          color: '#5177EE',
          value: '前往咨询'
        }
      ],
    }
  },
  created() {
    const systemInfo = uni.getSystemInfoSync()
    if (systemInfo.system.toLocaleLowerCase().includes('ios')) {
      this.isAndroid = false
    } else {
      this.isAndroid = true
    }
  },
  methods: {
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },
    // resume
    resume(e) {
      this.cardCur2 = e.detail.current
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.template-index {
  max-height: 100vh;
}

.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}


/* 轮播视觉差 start */
.card-swiper {
  height: 540rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  // padding: 0rpx 30rpx 90rpx 30rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
  will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
  margin-top: -320rpx;
  text-align: center;
  width: 100%;
  display: block;
  height: 50%;
  border-radius: 10rpx;
  transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
  margin-top: -320rpx;
  width: 100%;
  transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
}

.image-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-banner image {
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication {
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.spot {
  background-color: #FFFFFF;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active {
  opacity: 1;
  width: 30rpx;
  background-color: #FFFFFF;
}

/* 简历推荐 start */
.card-swiper2 {
  height: 420rpx !important;
  overflow: hidden;
}

.card-swiper2 swiper-item {
  width: 680rpx !important;
  left: 30rpx;
  box-sizing: border-box;
  overflow: initial;
  padding: 0 0rpx 40rpx 0;
}

.card-swiper2 swiper-item .swiper-item1 {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(0.97);
  transition: all 0.2s ease-in 0s;
  will-change: transform;
  background-color: #E7FAFE;
}

.card-swiper2 swiper-item.cur .swiper-item1 {
  transform: none;
  transition: all 0.2s ease-in 0s;
  will-change: transform;
}

.card-swiper2 swiper-item .swiper-item2 {
  margin-top: -180rpx;
  width: 100%;
  display: block;
  height: 50%;
  border-radius: 50%;
  transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
  transition: all 0.3s ease 0s;
  will-change: transform;
}

.card-swiper2 swiper-item.cur .swiper-item2 {
  margin-top: -180rpx;
  width: 100%;
  transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
  transition: all 0.3s ease 0s;
  will-change: transform;
}

.card-swiper2 swiper-item .swiper-item-text {
  margin-top: -270rpx;
  width: 100%;
  display: block;
  height: 100%;
  border-radius: 10rpx;
  transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
  transition: all 0.6s ease 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper2 swiper-item.cur .swiper-item-text {
  margin-top: -270rpx;
  width: 100%;
  transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
}



/* 底部tabbar假阴影 start*/
.bg-tabbar-shadow {
  background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
  position: fixed;
  bottom: 0;
  height: 450rpx;
  width: 100vw;
  z-index: -1;
}

/* 图标容器12 start */
.tn-three {
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}

.icon12 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);


      }
    }
  }
}

/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;

  &__back {
    margin: auto 5rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    margin-left: 30rpx;
    flex-basis: 5%;
  }

  &__search {
    flex-basis: 60%;
    width: 100%;
    height: 100%;

    &__box {
      width: 100%;
      height: 70%;
      padding: 10rpx 0;
      margin: 0 30rpx;
      border-radius: 60rpx 60rpx 0 60rpx;
      font-size: 24rpx;
    }

    &__icon {
      padding-right: 10rpx;
      margin-left: 20rpx;
      font-size: 30rpx;
    }

    &__text {
      // color: #AAAAAA;
    }
  }
}

.logo-image {
  width: 65rpx;
  height: 65rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 50%;
}

/* 自定义导航栏内容 end */


/* 热门图片 start*/
.image-tuniao1 {
  padding: 165rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-tuniao2 {
  padding: 75rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-tuniao3 {
  padding: 90rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 10rpx;
}

/* 胶囊banner*/
.image-capsule {
  padding: 100rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-piccapsule {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 20rpx 20rpx 0 0;
}

/* 标题 start */
.nav_title {
  -webkit-background-clip: text;
  color: transparent;

  &--wrap {
    position: relative;
    display: flex;
    height: 120rpx;
    font-size: 46rpx;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
    background-size: cover;
  }
}

/* 标题 end */

/* 业务展示 start */
.tn-info {

  &__container {
    margin-top: 10rpx;
    margin-bottom: 50rpx;
  }

  &__item {
    width: 47.7%;
    margin: 15rpx 0rpx 30rpx 0rpx;
    padding: 40rpx 30rpx;
    border-radius: 10rpx;


    position: relative;
    z-index: 1;

    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
    }

    &__left {

      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
        }
      }

      &__content {
        font-size: 25rpx;

        &--data {
          color: rgba(255, 255, 255, 0.5);
          margin-top: 5rpx;
          // font-weight: bold;
        }
      }
    }

    &__right {
      &--icon {
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        font-size: 100rpx;
        width: 108rpx;
        height: 108rpx;
        text-align: center;
        line-height: 60rpx;
        opacity: 0.15;
      }
    }

    &__bottom {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 0 0 10rpx 10rpx;
      position: absolute;
      width: 85%;
      line-height: 15rpx;
      left: 50%;
      bottom: -15rpx;
      transform: translateX(-50%);
      z-index: -1;
      text-align: center;
    }
  }
}

/* 业务展示 end */

/* 底部tabbar start*/
.footerfixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  background-color: #FFFFFF;
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}

.tabbar {
  display: flex;
  align-items: center;
  min-height: 110rpx;
  justify-content: space-between;
  padding: 0;
  height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.tabbar .action {
  font-size: 22rpx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  overflow: initial;
}

.bar-center {
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.8rem);
  }
}

.tabbar .action .bar-icon {
  width: 100rpx;
  position: relative;
  display: block;
  height: auto;
  margin: 0 auto 10rpx;
  text-align: center;
  font-size: 42rpx;
  // line-height: 50rpx;
}

.tabbar .action .bar-icon image {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
}

.tabbar .action .bar-circle {
  position: relative;
  display: block;
  margin: 0rpx auto 0rpx;
  text-align: center;
  font-size: 52rpx;
  line-height: 90rpx;
  // background-color: #01BEFF;
  width: 100rpx !important;
  height: 100rpx !important;
  overflow: hidden;
  // border-radius: 50%;
  // box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
  //   0px -8px 40px rgba(255, 255, 255, 1),
  //   inset 0px -10px 10px rgba(70,23,129, 0.05),
  //   inset 0px 10px 20px rgba(255, 255, 255, 1);
  // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
}

.tabbar .action .bar-circle image {
  width: 100rpx;
  height: 100rpx;
  display: inline-block;
  margin: 0rpx auto 0rpx;
}

/* 流星+悬浮 */
.nav-index-button {
  animation: suspension 3s ease-in-out infinite;
  z-index: 999999;


  &__content {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;
      transform: scale(0.85);

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
      }
    }
  }

  &__meteor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

    &__wrapper {
      width: 100rpx;
      height: 100rpx;
      transform-style: preserve-3d;
      animation: spin 20s linear infinite;
    }

    &__item {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      border-radius: 1000rpx;
      left: 0;
      top: 0;

      &--pic {
        display: block;
        width: 100%;
        height: 100%;
        background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
        background-size: 100% 100%;
        animation: arc 4s linear infinite;
      }
    }
  }
}


@keyframes suspension {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.6rem);
  }
}

@keyframes spin {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-360deg);
  }
}

@keyframes arc {
  to {
    transform: rotate(360deg);
  }
}

/* 图标容器4 start */
.tn-cool-color-icon4 {
  // background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12);   16
  // background-image: linear-gradient(135deg, #ED1C24, #FECE12);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.icon4 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 110rpx;
      height: 110rpx;
      font-size: 55rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;
      box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
        0px -8px 40px rgba(255, 255, 255, 1),
        inset 0px -10px 10px rgba(70, 23, 129, 0.05),
        inset 0px 10px 20px rgba(255, 255, 255, 1);
    }
  }
}
</style>